<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>angular</title>
</head>
<body>
<div ng-app="myApp">
	<my-ctrl hr-color="red"></my-ctrl>
	<div ng-controller="myAppCtrl">
		<input type="text" ng-model="name">
		<my-ctr hr-color="name"></my-ctr>
	</div>
</div>

<script type="text/javascript">
	document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/10+'px';
</script>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
<script type="text/javascript">
	var app =angular.module('myApp', []);
	app.directive('myCtrl', [function () {
		return {
			restrict: 'ACE',
			template:'<span style="color:{{color}}">小兵</span>',
			scope:{
				color:'@hrColor'
			}
		};
	}])
	app.directive('myCtr', [function () {
		return {
			restrict: 'ACE',
			template:'<span style="color:{{color}}">小兵</span>',
			scope:{
				color:'=hrColor'
			}
		};
	}])
	app.controller('myAppCtrl', ['$scope', function ($scope) {
		$scope.name='red';
	}])
</script>
</body>
</html>
<!--应该是14.11，时间-2017-05-08->